<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="./sass/register.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="icon" href="./favicon.ico">

    <script src="https://at.alicdn.com/t/font_2708812_627rd6uh4cg.js"></script>

    <!-- <script src="./js/jquery-3.6.0.js"></script> -->
    <!-- <script src="./js/register.js"></script> -->
</head>

<body>
    <div class="login">
        <img src="./images/login1.jpg" alt="">
        <div class="login_list">
            <div class="nav">
                <div class="logo">
                    <img src="./images/logo-mi2.png" alt="">
                    <h1>小米账号</h1>
                </div>
                <div class="nav_menu">
                    <a href="">用户隐私</a>
                    <a href="">隐私政策</a>
                    <a href="">帮助中心</a>
                    <a href="" class="sep">中文(简体)</a>
                </div>
            </div>
            <div class="layout">

                <div class="lay_list">
                    <a href="./login.html" class="login_s">登录</a>
                    <a href="" class="reg">注册</a>
                    <div class="login_in">
                        <input type="text" class="username" placeholder="用户名">
                        <span class="username_span"></span>

                        <input type="text" class="phone_tel" placeholder="手机号">
                        <span class="phone_tel_span"></span>
                        <input type="text" class="email" placeholder="@邮箱">
                        <span class="email_span"></span>

                        <input type="password" class="password" placeholder="密码">
                        <span class="password_span"></span>


                        <input type="text" class="code" placeholder="验证码区分大小写">
                        <span class="code_text"></span>
                        <span class="code_span"></span>
                        <input type="checkbox" class="xz"><span>已阅读并同意小米帐号 用户协议 和 隐私政策</span>
                        <button class="btn">注册</button>
                        <a href="">忘记密码?</a><a href="" class="tel">手机号登录</a>

                        <p>其他方式登录</p>
                        <div class="qita">
                            <a href=""><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-qq"></use>
                                </svg></a>
                            <a href=""><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-weibo"></use>
                                </svg></a>
                            <a href=""><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-zhifubao"></use>
                                </svg></a>
                            <a href=""><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-weixin"></use>
                                </svg></a>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

</body>
<script src="./js/code.js"></script>
<script src="./js/tool_ajax.js"></script>
<script src="./js/api.js"></script>
<script>
    // const $ = ele => document.querySelector(ele);
    var UserName = false;
    var UserPwd = false;
    var Code = false;
    var Phone_Tel = false
    var Email = false

    var username = $('.username').value;

    var password = $('.password').value;

    var phone_tel = $('.phone_tel').value;
    var email = $('.email').value;

    //随机验证码
    $('.code_text').innerHTML = randCode();
    $('.code_text').onclick = function () {
        $('.code_text').innerHTML = randCode();
    }

    //用户名验证
    $('.username').onmouseout = function () {
        username = $('.username').value;
        var reg = /^[a-zA-Z_$][\w$]{5,11}$/;
        if (reg.test(username)) {
            UserName = true;
            $('.username_span').innerHTML = "√";
            $('.username_span').style.color = "green";
            $('.username_span').style.fontSize = "14px";
        } else {
            UserName = false;
            $('.username_span').innerHTML = "用户名长度3-15位字母或数字且不能以数字开头";
            $('.username_span').style.color = "red";
            $('.username_span').style.fontSize = "14px";
        }

    }


    //手机号
    $('.phone_tel').onmouseout = function () {
        phone_tel = $('.phone_tel').value;
        var reg = /^1[3-9]\d{9}$/;
        if (reg.test(phone_tel)) {
            Phone_Tel = true;
            $('.phone_tel_span').innerHTML = "√";
            $('.phone_tel_span').style.color = "green";
            $('.phone_tel_span').style.fontSize = "14px";
        } else {
            Phone_Tel = false;
            $('.phone_tel_span').innerHTML = "* 手机号码格式不正确";
            $('.phone_tel_span').style.color = "red";
            $('.phone_tel_span').style.fontSize = "14px";
        }

    }

    //邮箱
    $('.email').onmouseout = function () {
        email = $('.email').value;
        var reg = /^\w+@\w+\.(com|cn|email)$/;
        if (reg.test(email)) {
            Email = true;
            $('.email_span').innerHTML = "√";
            $('.email_span').style.color = "green";
            $('.email_span').style.fontSize = "14px";
        } else {
            Email = false;
            $('.email_span').innerHTML = "* 邮箱格式有误";
            $('.email_span').style.color = "red";
            $('.email_span').style.fontSize = "14px";
        }

    }

    //密码
    $('.password').onmouseout = function () {
        var reg = /^[\w$]{6,16}$/;
        password = $('.password').value;
        if (reg.test(password)) {
            UserPwd = true;

            $('.password_span').innerHTML = "√";
            $('.password_span').style.color = "green";
            $('.password_span').style.fontSize = "14px";
        } else {
            UserPwd = false;
            $('.password_span').innerHTML = "* 密码长度应在6-20个字符之间,区分大小写"
            $('.password_span').style.color = "red";
            $('.password_span').style.fontSize = "14px";
        }

    }

    $('.btn').onclick = async function () {

        const code = $('.code').value;
        if (code) {

            if (code === $('.code_text').innerHTML) {
                Code = true;
            } else {
                Code = false;
                $('.code_span').innerHTML = "* 验证码错误"
                $('.code_span').style.color = "red";
                $('.code_span').style.fontSize = "14px";
                alert(333)
            }
        } else {

            $('.code_span').innerHTML = "* 验证码不能为空"
            $('.code_text').innerHTML = randCode();
        }
        console.log(UserName);
        console.log(UserPwd);
        console.log(Code);
        console.log(Email);
        console.log(Phone_Tel);
        if (UserName && UserPwd && Code && Email && Phone_Tel) {

            if ($('.xz').checked) {
                alert("注册成功")
                const res = await register({
                    username,
                    password,
                    email,
                    phone_tel
                })
                const {
                    status,
                    msg
                } = res;
                if (status) {
                    location.href = './login.html';
                } else {
                    alert(msg)
                }
            } else {
                alert("请勾选协议!")
            }

        } else {
            alert("注册失败")
        }
    }
</script>

</html>